<template>
  <div class="app-container home">
<!--个人信息-->



        <el-descriptions title="用户信息:">

          <!--头像-->
          <el-descriptions-item label="头像">

            <div class="demo-basic--circle">
              <div class="block"><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar></div>
              <div class="block" v-for="size in sizeList" :key="size">
                <el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
              </div>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="用户昵称">otto</el-descriptions-item>
          <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
          <el-descriptions-item label="vip等级">10</el-descriptions-item>
          <el-descriptions-item label="创建时间">二零二四年五月九日</el-descriptions-item>
        </el-descriptions>
        <hr />


    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <h2>公告</h2>
        <br>
        <h3>一则震惊全球之大消息：</h3>
        <p>

          ⠀⠀⠀玛尔沃百货大厦开业大酬宾！全场8折！玛尔沃大厦不仅应有尽有，还有精美礼品等你带走！走过路过千万不要错过，我们的口号是：打倒沃尔玛！
        </p>
        <p>

        </p>
        <p>
          <el-tag type="danger">&yen;免费酒水(假)</el-tag>
          <!--        &nbsp  <el-tag type="success">!经理超帅(真)</el-tag>-->
          &nbsp;
          <el-tag type="primary">$全场八折</el-tag>

        </p>


        <p>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-cloudy"
            plain
            @click="goTarget('https://www.yuanshen.com/#/')"
            >访问官网(无)</el-button
          >


        </p>
        &nbsp;

        <el-popconfirm
          title="假的"
        >
          <el-button slot="reference" type="success">点击领取全场三折优惠券</el-button>
        </el-popconfirm>
      </el-col>

      <el-col :sm="24" :lg="12" style="padding-left: 50px">
        <span><h3>新开的分店:</h3></span>
<!--        <div class="demo-basic&#45;&#45;circle">-->
<!--          <div class="block"><el-avatar shape="square" :size="300" :src="tupianUrl"></el-avatar></div>-->
<!--          <div class="block" v-for="size in sizeList" :key="size">-->
<!--            <el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>-->
<!--          </div>-->
<!--        </div>-->
        <div class="demo-image__preview">
          <el-image
            style="width: 80%; height: 80%"
            :src="url"
            :preview-src-list="srcList">
          </el-image>
        </div>
      </el-col>
    </el-row>
    <el-divider />
    <!--抢购-->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8">

          <div slot="header" class="clearfix">

          </div>
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item title="销售榜第一,点击一睹芳容" name="4">
            <div class="demo-basic--circle">
              <div class="block"><el-avatar shape="square" :size="300" :src="dayunUrl"></el-avatar></div>
              <div class="block" v-for="size in sizeList" :key="size">
                <el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item title="销售榜第二,触碰查看它的样子" name="2">
            <div class="demo-basic--circle">
              <div class="block"><el-avatar shape="square" :size="520" :src="binghongchaUrl"></el-avatar></div>
              <div class="block" v-for="size in sizeList" :key="size">
                <el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item title="销售榜第三,轻触观赏它的容貌" name="3">
            <div class="demo-basic--circle">
              <div class="block"><el-avatar shape="square" :size="300" :src="binglu"></el-avatar></div>
              <div class="block" v-for="size in sizeList" :key="size">
                <el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
              </div>
            </div>
          </el-collapse-item>

        </el-collapse>
          <el-card shadow="hover" style="width: 100%;">
            <div style="width: 100%; display: inline-block; ">
              <el-statistic :value="deadline2" time-indices title="🎉商品降价🎉">
                <template slot="suffix">
                  抢购即将开始
                </template>
              </el-statistic>
<!--              抢购链接-->
              <el-link type="primary" id="qianggou" href="http://localhost/xiaoshou/orderform">点击抢购</el-link>
            </div>
          </el-card>

      </el-col>
      <!--yu假的汉堡-->
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
      <el-row>
        <el-col :span="23" v-for="(o, index) in 1" :key="o" :offset="index > 0 ? 2 : 0">

          <el-card :body-style="{ padding: '10px' }">

            <div style="padding: 14px;">
              <span><h1>新品上市！</h1></span>
<!--              <div class="bottom clearfix">-->
<!--                <time class="time">{{ currentDate }}</time>-->
<!--                <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">-->

<!--              </div>-->
<!--              走马灯-->
<!--              <el-carousel :interval="4000" type="card" height="200px">-->
<!--                <el-carousel-item v-for="item in 6" :key="item">-->
<!--                  <h3 class="medium">{{ item }}</h3>-->
<!--                </el-carousel-item>-->
<!--              </el-carousel>-->
<!--              走马灯-->
<!--              <el-carousel :height="bannerHeight + 'px'">-->
<!--                <el-carousel-item v-for="item in imgwrap" :key="item.url">-->
<!--                  <img :src="item.url" class="bannerimg"/>-->
<!--                </el-carousel-item>-->
<!--              </el-carousel>-->
<!--卡片化-->
              <el-carousel :interval="800" type="card" height="250px">
                <el-carousel-item   v-for="item in dataList" :key="item.id" align="center">
                  <h3 ><img :src="item.src" alt="" style="height:250px; width:200px"  /></h3>
                </el-carousel-item>
              </el-carousel>



            </div>


          </el-card>

        </el-col>

      </el-row>
      </el-col>
      <!--yu-->

      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>请给我们打分~</span>
          </div>
          <!--评分-->
          <div class="block">

            <el-rate
              v-model="value"
              show-text
            texts="呕切啧呀哇">
            </el-rate>

          </div><!--评分-->
        </el-card>
      </el-col>
    </el-row>

  </div>


</template>

<script>

export default {
  name: "Index",
  data() {
    return {
//走马灯
//       bannerHeight: 300,
      // imgwrap:[
      //   {url:require("../assets/images/yongjie.jpg")},
      //   {url:require("../assets/images/jixie.png")},
      //   {url:require("../assets/images/baishi.jpg")},
      //   {url:require("../assets/images/xiedian.jpg")},
      //   {url:require("../assets/images/lipai.jpg")}
      // ],
      dataList: [
        {id: 1, src: require("../assets/images/img.png")},
        {id: 2, src: require("../assets/images/img_1.png")},
        {id: 3, src: require("../assets/images/baishi.jpg")},
        {id: 4, src: require("../assets/images/img_1.png")},
        {id: 5, src: require("../assets/images/lipai.jpg")},
        {id: 6, src: require("../assets/images/img_1.png")},
      ],


      //评分
      value: null,
      value1: null,
      value2: null,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'] ,// 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }// 等同于 { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
     //头像
     //  binglu:"https://tse4-mm.cn.bing.net/th/id/OIP-C.srVQe4tJckcek2XAPjtiyAAAAA?rs=1&pid=ImgDetMain",
      binglu:' https://tse1-mm.cn.bing.net/th/id/OIP-C.h9IwhcSWpe_2_h9Iodz4dQAAAA?rs=1&pid=ImgDetMain',
      binghongchaUrl:"https://source.shop.busionline.com/2023-06-10_6484303597478.jpg",
      dayunUrl:"https://img.zgsc123.com/uploadimg/image/20210317/20210317170336_22659.jpg",
      squareUrl: "http://59.110.235.6/hopeDoc/kangweitao42.wangchuang.com/goodsImages/26614100021817508.jpg",
      tupianUrl:"https://img.zgsc123.com/uploadimg/image/20210317/20210317170336_22659.jpg",
      // sizeList: ["large"]
      //抢购
      deadline2: Date.now() + 1000 * 60 * 60 * 8,
      stop: true,
      //paihangbang
      activeName: '1',
//图片
      url: 'https://ts1.cn.mm.bing.net/th/id/R-C.a7330452607a24010ae54d26f1c5ee8c?rik=RoDDGartVVcfFg&riu=http%3a%2f%2fwww.ecmax.cn%2fmedia%2fjieshao%2f2019%2f05%2f%e6%b2%83%e5%b0%94%e7%8e%9b.jpg&ehk=%2fKaobgJ49szJ8Qzyj8%2b0ila54VziRoLv1rS1WcBpuNg%3d&risl=&pid=ImgRaw&r=0',
      srcList: [
        'https://ts1.cn.mm.bing.net/th/id/R-C.a7330452607a24010ae54d26f1c5ee8c?rik=RoDDGartVVcfFg&riu=http%3a%2f%2fwww.ecmax.cn%2fmedia%2fjieshao%2f2019%2f05%2f%e6%b2%83%e5%b0%94%e7%8e%9b.jpg&ehk=%2fKaobgJ49szJ8Qzyj8%2b0ila54VziRoLv1rS1WcBpuNg%3d&risl=&pid=ImgRaw&r=0',
        'https://www.logo9.net/userfiles/images/828r4.jpg',
        'https://tse1-mm.cn.bing.net/th/id/OIP-C.h9IwhcSWpe_2_h9Iodz4dQAAAA?rs=1&pid=ImgDetMain',

      ]
    }
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    setSize(){
      this.bannerHeight = document.body.clientWidth / 4
    }
  }
  ,
  hilarity() {
    this.$notify({
      title: "提示",
      message: "时间已到",
      duration: 0,
    });
  },
  clickFn() {
    this.$refs.statistic.suspend(this.stop);
    this.stop = !this.stop;
  },
  add() {
    this.deadline3 = this.deadline3 + 1000 * 10;
  },

};

</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
//yu zi jia han bao
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 31px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
//抢购位置设置
#qianggou{
  margin-left: 255px ;
  margin-top: 15px ;
}
//zoumadeng
//.el-carousel__item h3 {
//  color: #475669;
//  font-size: 14px;
//  opacity: 0.75;
//  line-height: 200px;
//  margin: 0;
//}
//
//.el-carousel__item:nth-child(2n) {
//  background-color: #99a9bf;
//}
//
//.el-carousel__item:nth-child(2n+1) {
//  background-color: #d3dce6;
//}
//.bannerimg{
//  width: 100%;
//  height: inherit;
//}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

//yu
</style>

